<template>
	<view class="page-content">
		<view>
			<u-tabs-swiper active-color="#000000" inactive-color="#999999" :bar-style="{background:'#FCD610'}" ref="uTabs"
				:list="list" :current="current" @change="tabsChange" :is-scroll="false"></u-tabs-swiper>
		</view>
		<view class="search-box">
			<custom-input placeholder="搜索" background="#FFFFFF" :text="filterParmas.searchValue"
				@handleSearch="handleSearch"></custom-input>
		</view>

		<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<view class="sort-box">
					<view style="flex: 1;">
						<sort-tab sortText="价格排序" @sortChanged="sortPriceChanged"></sort-tab>
					</view>
					<view style="flex: 1;">
						<sort-tab sortText="距离排序" @sortChanged="sortDistanceChanged"></sort-tab>
					</view>
				</view>
				<scroll-view scroll-y style="flex: 1;overflow-y: auto;" @scrolltolower="onreachBottom" :refresher-enabled="true"
					@refresherrefresh="handlerefresh" :refresher-triggered="showrefresh">
					<template v-if="ztDataList.length===0&&status==='nomore'">
						<empty></empty>
					</template>
					<template v-else>
						<view class="cards" v-for="(item,index) in ztDataList" :key="index" @click="driverplandetail(item.id)">
							<detective-card :data="item"></detective-card>
						</view>
						<u-loadmore :status="status" />
					</template>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="sort-box">
					<view style="flex: 1;">
						<sort-tab sortText="价格排序" @sortChanged="sortPriceChanged"></sort-tab>
					</view>
					<view style="flex: 1;">
						<sort-tab sortText="距离排序" @sortChanged="sortDistanceChanged"></sort-tab>
					</view>
				</view>
				<scroll-view scroll-y style="flex: 1;overflow-y: auto;" @scrolltolower="onreachBottom" :refresher-enabled="true"
					@refresherrefresh="handlerefresh" :refresher-triggered="showrefresh">
					<template v-if="xsDataList.length===0&&status==='nomore'">
						<empty></empty>
					</template>
					<template v-else>
						<view class="cards" v-for="(item,index) in xsDataList" :key="index" @click="driverplandetail(item.id)">
							<bounty-offered-card :data="item"></bounty-offered-card>
						</view>
						<u-loadmore :status="status" />
					</template>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="sort-box">
					<view style="flex: 1;">
						<sort-tab sortText="距离排序" @sortChanged="sortDistanceChanged"></sort-tab>
					</view>
				</view>
				<scroll-view scroll-y style="flex: 1;overflow-y: auto;" @scrolltolower="onreachBottom" :refresher-enabled="true"
					@refresherrefresh="handlerefresh" :refresher-triggered="showrefresh">
					<template v-if="bdDataList.length===0&&status==='nomore'">
						<empty></empty>
					</template>
					<template v-else>
						<view class="cards" v-for="(item,index) in bdDataList" :key="index" @click="driverplandetail(item.id)">
							<bag-loss-card :data="item"></bag-loss-card>
						</view>
						<u-loadmore :status="status" />
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view class="add-btn"><add-btn :link="linkto"></add-btn></view>
	</view>
</template>

<script>
	import detectiveCard from "components/common/card/report-loss/components/pet-detective-card.vue";
	import bountyOfferedCard from "components/common/card/report-loss/components/bounty-offered-card.vue";
	import bagLossCard from "components/common/card/report-loss/components/bag-loss-card.vue";
	import customInput from "components/common/custom-input.vue";
	import sortTab from "components/index/cmbz/sort-tab.vue";
	import addBtn from "components/index/add-fixed-btn.vue";
	import empty from "components/common/empty/empty.vue";
	import reportLoss from "../../../api/reportLoss.js";
	import utils from "../../../utils/util.js";
	export default {
		data() {
			return {
				list: [{
					name: '宠物侦探'
				}, {
					name: '挂失悬赏'
				}, {
					name: '报丢发布'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				status: 'loadmore',
				ztDataList: [], //宠物侦探
				xsDataList: [], //挂失悬赏
				bdDataList: [], //报丢发布
				filterParmas: {
					sortOrder: '',
					sort: '',
					searchValue: '',
					nowLat: 0,
					nowLng: 0,
					pageNum: 0,
					pageSize: this.$config.pageSize,
				}, //筛选参数
				showrefresh: false,
			}
		},
		watch: {
			swiperCurrent: function(newvalue, oldvalue) {
				this.ztDataList = [];
				this.xsDataList = [];
				this.bdDataList = [];
				this.filterParmas.pageNum = 0;
				this.current = newvalue;
				this.filterParmas = {
					...this.filterParmas,
					sortOrder: '',
					sort: "",
					searchValue: '',
				};
				this.getDataList()
			},
		},
		computed: {
			linkto() {
				switch (this.current) {
					case 0:
						return '/page_index/report-loss/add-detective/add-detective';
					case 1:
						return '/page_index/report-loss/add-bounty-offered/add-bounty-offered';
					case 2:
						return '/page_index/report-loss/bag-loss-publish/bag-loss-publish';
					default:
						break;
				}
			}
		},
		onShow() {
			this.ztDataList = [];
			this.xsDataList = [];
			this.bdDataList = [];
			if (this.filterParmas.nowLat && this.filterParmas.nowLng) {
				this.getDataList();
			} else {
				utils.getLocationInfo().then(res => {
					this.filterParmas.nowLat = res.latitude;
					this.filterParmas.nowLng = res.longitude;
					this.getDataList()
				}).catch(err => {
					this.getDataList()
				})
			}
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if (this.status === 'loadmore')
					this.getDataList()
			},
			sortPriceChanged(value) {
				this.filterParmas.sortOrder = value;
				this.filterParmas.sort = "price";
				this.ztDataList = [];
				this.xsDataList = [];
				this.bdDataList = [];
				this.filterParmas.pageNum = 0;
				this.getDataList()
			},
			sortDistanceChanged(value) {
				this.filterParmas.sortOrder = value;
				this.filterParmas.sort = "distance";
				this.ztDataList = [];
				this.xsDataList = [];
				this.bdDataList = [];
				this.filterParmas.pageNum = 0;
				this.getDataList();
			},
			driverplandetail(id) {
				switch (this.current) {
					case 0:
						uni.navigateTo({
							url: '/page_index/report-loss/losser-detail/losser-detail?id=' + id
						})
						break;
					case 1:
						uni.navigateTo({
							url: '/page_index/report-loss/offer-edtail/offer-edtail?id=' + id
						})
						break;
					case 2:
						uni.navigateTo({
							url: '/page_index/report-loss/bag-loss-detail/bag-loss-detail?id=' + id
						})
						break;
					default:
						break;
				}
			},
			handleSearch(val) {
				this.filterParmas.searchValue = val;
				this.ztDataList = [];
				this.xsDataList = [];
				this.bdDataList = [];
				this.filterParmas.pageNum = 0;
				this.getDataList()
			},
			handlerefresh() {
				this.showrefresh = true;
				this.ztDataList = [];
				this.xsDataList = [];
				this.bdDataList = [];
				this.filterParmas.pageNum = 0;
				this.getDataList();
			},
			getDataList() {
				if (this.status !== 'loading') {
					this.status = "loading";
					this.filterParmas.pageNum++;
					if (this.current === 0) {
						reportLoss.getPetDetectiveList(this.filterParmas).then(res => {
							if (res.code === 200) {
								this.showrefresh = false;
								this.ztDataList.push(...res.rows);
								if (res.rows?.length < this.$config.pageSize)
									this.status = 'nomore'
								else {
									this.status = 'loadmore'
								}
							} else {
								throw Error()
							}
						}).catch(err => {
							this.showrefresh = false
							this.status = 'nomore'
							console.log(err);
						})
					} else if (this.current === 1) {
						reportLoss.getPetLossOfferList(this.filterParmas).then(res => {
							if (res.code === 200) {
								this.xsDataList.push(...res.rows);
								if (res.rows?.length < this.$config.pageSize)
									this.status = 'nomore'
								else {
									this.status = 'loadmore'
								}
								this.showrefresh = false;
							} else {
								throw Error()
							}
						}).catch(err => {
							this.showrefresh = false
							this.status = 'nomore'
							console.log(err);
						})
					} else if (this.current === 2) {
						reportLoss.getPetReportLossList(this.filterParmas).then(res => {
							if (res.code === 200) {
								this.bdDataList.push(...res.rows);
								if (res.rows?.length < this.$config.pageSize)
									this.status = 'nomore'
								else {
									this.status = 'loadmore'
								}
								this.showrefresh = false;
							} else {
								throw Error()
							}
						}).catch(err => {
							this.showrefresh = false
							this.status = 'nomore'
							console.log(err);
						})
					}
				}
			},
		},
		components: {
			detectiveCard,
			bountyOfferedCard,
			bagLossCard,
			customInput,
			sortTab,
			addBtn,
			empty
		}
	}
</script>

<style lang="scss" scoped>
	.page-content {
		height: 100%;
		background-color: #F6F6F6;

		display: flex;
		flex-direction: column;

		.search-box {
			padding: 16rpx 32rpx 24rpx 32rpx;
		}

		.sort-box {
			display: flex;
			justify-content: cneter;
			align-items: center;
			margin-bottom: 24rpx;
		}

		.swiper-box {
			flex: 1;

			.swiper-item {
				padding: 0 32rpx;
				display: flex;
				flex-direction: column;
				box-sizing: border-box;

				.cards {
					margin-bottom: 32rpx;

					// &:first-child {
					// 	margin-top: 0;
					// }
				}
			}
		}

		.add-btn {
			position: absolute;
			bottom: 218rpx;
			right: 32rpx;
		}
	}
</style>